<template>
  <div class="app-container">
    <el-tabs
      v-model="permissionType"
      type="card"
      editable
    >
      <template #addIcon>
        <el-button type="primary" @click="handleSendKey" class="recommend">发送钥匙</el-button>
        <el-button type="primary" plain @click="handlePwdOrCard('pwd')">获取密码</el-button>
        <el-button type="primary" plain @click="handlePwdOrCard('card')">发  卡</el-button>
        <el-button type="warning" :icon="DeleteFilled" plain @click="handleRemoveAll"></el-button>
      </template>
      <el-tab-pane label="电子钥匙" name="electronicKey">
        <ElectronicKeyPane />
      </el-tab-pane>
      <el-tab-pane label="密码管理" name="password">
        <PasswordPane />
      </el-tab-pane>
      <el-tab-pane label="IC卡" name="icCard">
        <IcCardPane />
      </el-tab-pane>
      <el-tab-pane label="指纹" name="fingerprint">
        <FingerprintPane />
      </el-tab-pane>
    </el-tabs>
    <SendKey
      :visible="sendKeyVisible"
      @cancel="() => sendKeyVisible = false"
      @ok="handleSendKeyOk"
    />
    <PwdOrCard
      :visible="pwdOrCardVisible"
      :type="pwdOrCardType"
      @cancel="() => pwdOrCardVisible = false"
      @ok="handlePwdOrCardVisibleOk"
    />
  </div>
</template>
<script setup name="DoorPermission">
import { DeleteFilled } from '@element-plus/icons-vue'
import ElectronicKeyPane from './electronicKeyPane.vue'
import PasswordPane from './passwordPane.vue'
import IcCardPane from './icCardPane.vue'
import FingerprintPane from './fingerprintPane.vue'
import SendKey from './component/sendKey.vue'
import PwdOrCard from './component/pwdOrCard.vue'

const route = useRoute()

const { proxy } = getCurrentInstance()

const permissionType = ref('electronicKey')
const sendKeyVisible = ref(false)
const pwdOrCardVisible = ref(false)
const pwdOrCardType = ref('pwd')

// 发送钥匙
function handleSendKey() {
  sendKeyVisible.value = true
}
// 发送钥匙弹窗确认事件
function handleSendKeyOk(params) {
  console.log(params);
  sendKeyVisible.value = false
}
// 获取密码 or 发卡
function handlePwdOrCard(type) {
  pwdOrCardType.value = type
  pwdOrCardVisible.value = true
}
// 获取密码 or 发卡 确认事件
function handlePwdOrCardVisibleOk(params) {
  console.log(params);
  pwdOrCardVisible.value = false
}
// 删除所有入住人开门方式
function handleRemoveAll() {
  // 将删除入住人全部开门方式
  proxy.$modal.confirm('将删除入住人全部开门方式').then(() => {
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {})
}
</script>
<style lang="scss" scoped>
:deep(.el-tabs) {
  .is-icon-close {
    display: none !important;
  }
  .el-tabs__item {
    padding: 0 20px!important;
  }
  .el-tabs__new-tab {
    width: 345px;
    border: unset;
  }
}
.recommend {
  position: relative;
  padding-right: 35px;
  &::after {
    content: '推荐';
    position: absolute;
    font-size: 12px;
    right: -1px;
    top: -1px;
    line-height: 20px;
    padding: 0 3px 2px 8px;
    color: #fff;
    background-color: var(--el-color-warning);
    border-bottom-left-radius: 70%;
    border-top-right-radius: 25%;
  }
}
</style>